<!-- 分组表单 -->
<template>
  <main class="page-main">

    <a-form :model="formData" name="basic" autocomplete="off"
            :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }"
            @finish="onFinish" @finishFailed="onFinishFailed"
    >
      <a-form-item label='类型' name='type' :rules='rules.type'>
        <a-select class="width" v-model:value='formData.type' disabled :options="typeList"
                  @change="handleGetTree"></a-select>
      </a-form-item>
      <a-form-item label='名称' name='name' :rules='rules.name'>
        <a-input v-model:value='formData.name'/>
      </a-form-item>
      <a-form-item label='父级' name='parentId' :rules='rules.parentId'>
        <a-tree-select :tree-data="groupTree" v-model:value='formData.parentId'></a-tree-select>
      </a-form-item>
      <a-form-item label='图标' name='iconName' v-if="showIcon">
        <icon-selector :icon-name="formData.iconName" @changed="handleIconChanged"
                       :key="new Date().getTime()"></icon-selector>
      </a-form-item>
      <a-form-item label='排序' name='sort'>
        <a-input-number class="width" v-model:value='formData.sort'/>
      </a-form-item>
      <a-flex class="width" justify="space-around">
        <a-button type="primary" html-type="submit">提交</a-button>
        <a-button @click="handleClose">取消</a-button>
      </a-flex>
    </a-form>
  </main>
</template>
<script lang="ts">
import * as apiUtil from "@/api/ApiUtils";
import * as api from "@/api/SysGroupApi";
import {notification} from 'ant-design-vue';
import IconSelector from "@/components/IconSelector.vue";

export default {
  props: {
    type: {type: String},
    dataId: {type: Number || String},
    showIcon: {type: Boolean}
  },
  components: {IconSelector},
  data() {
    return {
      formData: {
        name: "",
        type: "",
        parentId: null,
        iconName: "",
        sort: null
      },
      rules: {
        type: [{required: true, message: '类型必填!'}],
        name: [{required: true, message: '名称必填!'}],
        parentId: [{required: true, message: '父级ID必填!'}],
      },
      typeList: [],
      groupTree: []
    }
  },
  methods: {
    onFinish(values: any) {
      console.log('Success:', values, this.$props.dataId);
      this.handleSave();
    },
    onFinishFailed(errorInfo: any) {
      console.log('Failed:', errorInfo);
    },
    handleClose() {
      this.$emit("close");
    },
    handleSuccessed() {
      this.$emit("successed");
    },
    /**
     * 保存数据
     */
    handleSave() {
      api.save(this.formData).then((res) => {
        if (apiUtil.isSuccessed(res)) {
          this.handleSuccessed();
          this.handleClose();
          //请求失败
          notification.success({
            message: this.actionType + "成功",
            description: this.actionType + "成功"
          });

        } else {
          this.handleClose();
          //请求失败
          notification.error({
            message: "提交失败",
            description: res.message
          });
        }
      });
    },
    handleIconChanged(name) {
      this.formData.iconName = name;
    },
    handleGetDetail() {
      if (!this.$props.dataId) {
        return
      }
      api.getById(this.$props.dataId).then(res => {
        if (apiUtil.isSuccessed(res)) {
          this.formData = res.data;
          console.log("handleGetDetail", this.formData.iconName);
        }
      })
    },
    handleGetTree() {
      api.getTreeSelector(this.formData).then((res) => {
        if (apiUtil.isSuccessed(res)) {
          if (res.data) {
            this.groupTree = [];
            this.groupTree.push(res.data);
          }
        }
      });
    }
  },
  computed: {
    actionType() {
      return this.$props.dataId ? "修改" : "添加"
    }
  },
  watch: {
    dataId(newValue) {
      console.log("dataId:", newValue);
      if (newValue) {
        this.handleGetDetail();
      } else {
        this.formData = {
          type: this.$props.type
        }
      }
    }
  },
  mounted() {
    if (this.$props.dataId) {
      this.handleGetDetail();
    } else {
      this.formData = {
        type: this.$props.type
      }
    }
    this.handleGetTree();
    api.getTypeList().then((res) => {
      if (apiUtil.isSuccessed(res)) {
        this.typeList = res.data;
      }
    });

  }
}
</script>
<style scoped>

</style>